<template>
  <div class="dataMap">
    <el-form class="act-clear-from" :model="detail" label-position="top">
      <el-form-item label="跳转类型：">
        <el-select
          v-model="detail.leixing"
          size="large"
          placeholder="选择类型"
          style="width: 260px"
          @change="select(index)"
        >
          <el-option
            v-for="item in type"
            :key="item.dicValue"
            :label="item.dicLabel"
            :value="item.dicValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上传图片(建议尺寸:752*1448px)">
        <bjz-oss
          :previewList="detail.tupian"
          :accept="['.jpg', '.png', '.jpeg']"
          @success="successImg"
          @remove="removeImg"
        />
      </el-form-item>
      <el-form-item
        v-if="detail.leixing == 'shujuditutiaozhuanleixing_fuwenben'"
        label="富文本："
      >
        <editor
          style="width: 100%"
          :initValue="detail.leixingneirong"
          @onVal="onVal"
        />
      </el-form-item>
      <el-form-item
        v-if="detail.leixing == 'shujuditutiaozhuanleixing_lianjie'"
        label="跳转链接："
      >
        <el-col :span="10">
          <el-input size="large" v-model="detail.leixingneirong" />
        </el-col>
      </el-form-item>
      <el-form-item class="button-group">
        <el-button style="margin-left: 100px" type="primary" @click="submitForm"
          >提交</el-button
        >
        <el-button style="margin-left: 100px" type="primary" @click="GetList"
          >取消</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { GetDictionaryTree, GetDataMap, EditDataMap } from "@/api/system";
import { baseMsg } from "@/utils/utils";
const detail = ref({
  tupian: [],
  leixing: "",
  leixingneirong: "",
});
const type = ref([]);

// 查询类型下拉
const getType = () => {
  GetDictionaryTree({ dicModel: "shujuditutiaozhuanleixing" }).then((res) => {
    if (res.code == 4201) {
      type.value = res.data;
    }
  });
};
const onVal = (val) => {
  detail.value.leixingneirong = val;
};
const html2text = (html) => {
  html = html.replace(/(\n)/g, "");
  html = html.replace(/(\t)/g, "");
  html = html.replace(/(\r)/g, "");
  html = html.replace(/<\/?[^>]*>/g, "");
  html = html.replace(/(\s)/g, "");
  return html;
};
const select = () => {
  detail.value.leixingneirong = html2text(detail.value.leixingneirong);
};
// 图片上传成功
const successImg = (res) => {
  detail.value.tupian = [res];
};
// 上传文件删除
const removeImg = () => {
  detail.value.tupian = [];
};
// 提交表单
const submitForm = () => {
  EditDataMap(detail.value).then((res) => {
    if (res.code == 4202) {
      baseMsg("编辑数据地图成功");
      GetList();
    }
  });
};
const GetList = () => {
  GetDataMap().then((res) => {
    if (res.code == 4201) {
      detail.value = res.data;
    }
  });
};
GetList();
getType();
</script>
<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
}
.content {
  border: none !important;
  background-color: transparent !important;
}
.dataMap {
  padding: 20px;
}
</style>
